<template>
    <div class="wrap">
        <div class="content">
            <el-row v-for="(row, rowIndex) in colLine" :key="rowIndex">
                <el-col
                    class="form-item"
                    v-for="(col, colIndex) in row"
                    :key="colIndex"
                    :span="24 / colNum"
                >
                    <span class="form-item__label">{{col.label}}：</span>
                    <el-tooltip v-if="col.key === 'dept' && (col.value.length > 15)" effect="light" :content="col.value" placement="top-start">
                        <span class="form-item__content">{{col.value}}</span>
                    </el-tooltip>
                    <span v-else class="form-item__content">{{col.value}}</span>
                </el-col>
            </el-row>
            <el-row v-for="(row, index) in wholeLine" :key="index">
                <span style="float: none" class="el-form-item__label">{{row.label}}：</span>
                <code class="codeSty">{{row.value}}</code>
            </el-row>
        </div>
        <div class="bottom">
            <el-button type="primary" @click="back">返回</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        detailData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            colNum: 3,
            colList: [
                {
                    label: '微服务名称',
                    key: 'serviceName',
                    type: 0,
                    value: ''
                },
                {
                    label: '操作用户',
                    key: 'userName',
                    type: 0,
                    value: ''
                },
                // {
                //     label: '所属部门',
                //     key: 'dept',
                //     type: 0,
                //     value: ''
                // },
                // {
                //     label: "角色",
                //     key: "role",
                //     type: 0,
                //     value: ''
                // },
                {
                    label: '操作类型',
                    key: 'type',
                    type: 0,
                    value: ''
                },
                {
                    label: '操作用户IP',
                    type: 0,
                    key: 'ip',
                    value: ''
                },
                // {
                //     label: "操作描述",
                //     type: 0,
                //     key: "desc",
                //     value: ''
                // },
                {
                    label: '创建时间',
                    type: 0,
                    key: 'createTime',
                    value: ''
                }
            ],
            colLine: [],
            wholeLine: [
                {
                    label: '日志详情',
                    type: 1,
                    key: 'content',
                    value: ''
                }
            ]
        };
    },
    created() {
        this.colLine = this.dynamicRows(this.colList, this.colNum);
    },
    mounted() {},
    methods: {
        dynamicRows(array, col = 4) {
            return _.chunk(array, col);
        },
        setDetailData(target, origin) {
            let data = target.map(item => {
                let key = item.key;
                if (origin.hasOwnProperty(key)) {
                    item.value = origin[key] || '';
                }
                return item;
            });
            return data;
        },
        back() {
            this.$emit("backToLog");
        }
    },
    watch: {
        detailData(val) {
            let data = [];
            this.colLine.forEach(item => {
                data.push(this.setDetailData(item, val));
            });
            this.colLine = data;
            this.wholeLine = this.setDetailData(this.wholeLine, val);
        }
    }
};
</script>

<style lang="scss" scoped>
.codeSty {
    -webkit-font-smoothing: initial;
    background-color: #f8f8f8;
    border-radius: 2px;
    color: #525252;
    display: block;
    font-family: Roboto Mono, Monaco, courier, monospace;
    font-size: 0.8rem;
    line-height: inherit;
    margin: 0 2px;
    padding: 2.2em 5px;
    white-space: inherit;
}
.wrap {
    display: flex;
    height: 100%;
    flex-direction: column;
    .content {
        flex: 1;
        overflow-y: auto;
        & > div {
            margin-top: 10px;
        }
        .form-item {
            display: flex;
            font-size: 14px;
            color: #4c5c70;
            .form-item__label {
                min-width: 100px;
                padding: 0 5px 0 0;
                line-height: 32px;
                min-height: 33px;
            }
            .form-item__content {
                line-height: 32px;
                min-height: 33px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
    .bottom {
        align-self: center;
    }
}
</style>